<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript">
$(document).ready(function() { 
	$('#location option[value=${sessionScope.mvo.uvo.location}]').attr('selected',true);
	$('#visible option[value=${sessionScope.mvo.visible}]').attr('selected',true);
	$.ajax({
		url:"univSelect.do",
		dataType:"json",
		data:"location="+encodeURIComponent("${sessionScope.mvo.uvo.location}"),
		success:function(univListByLocation){
			$("#univ").empty()
			$.each(univListByLocation,function(index, univ){							
				var op="<option value="+univ+">"+univ+"</option>";
				$("#univ").append(op);
				$('#univ option[value=${sessionScope.mvo.uvo.univ}]').attr('selected',true);
			});						
		}//success
	});//ajax
	
			var status = "fail";
			$("#cancel").click(function() {
				location.href = "book_recent_list.do";
			});//click
			$("#updateForm").submit(function() {
				if ($(":input[name=password]").val() == "") {
					alert("비밀번호를 입력바랍니다.");
					return false;
				}
				if ($(":input[name=passwordconfirm]").val() == "") {
					alert("비밀번호 확인을 입력바랍니다.");
					return false;
				}
				if ($(":input[name=locationSelect]").val() == "") {
					alert("지역 선택바랍니다.");
					return false;
				}
				if ($(":input[name=univSelect]").val() == "") {
					alert("학교 선택바랍니다.");
					return false;
				}
				if($('#phone').val()==""){
					if($('#visible').val() == 1){
						alert("공개하실 휴대폰 번호를 입력바랍니다.");
						return false;
					}else{
						alert("휴대폰 번호를 입력하시면, 거래 시 편리하게 이용하실 수 있습니다.");
					}
				}
			});//submit
			
			$("#password").keyup(
							function() {
								var password = $("#password").val();
								if(password==""){
									$("#passCheckView").html("사용하실 비밀번호 안내").css("color","black");
									return false;
								}
								if (password != $("#passwordconfirm").val()) {
									$("#passCheckView").html("비밀번호가 일치하지 않습니다.").css("color", "red");
								} else {
									$("#passCheckView").html("비밀번호 확인되었습니다.").css("color", "blue");
								}
							});//keyup
			$("#passwordconfirm").keyup(
					function() {
						var passwordconfirm = $("#passwordconfirm").val();
						if(passwordconfirm==""){
							$("#passCheckView").html("사용하실 비밀번호 안내").css("color","black");
							return false;
						}
						if (passwordconfirm != $("#password").val()) {
							$("#passCheckView").html("비밀번호가 일치하지 않습니다.").css("color", "red");
						} else {
							$("#passCheckView").html("비밀번호 확인되었습니다.").css("color", "blue");
						}
					});//keyup
			$("#location").change(function() {
				$.ajax({
					url:"univSelect.do",
					dataType:"json",
					data:"location="+encodeURIComponent($(this).val()),
					success:function(univListByLocation){
						$("#univ").empty()
						$.each(univListByLocation,function(index, univ){							
							var op="<option value="+univ+">"+univ+"</option>";
							$("#univ").append(op);
						});						
					}//success
				});//ajax
			});//change
		});//ready
</script>
<form id="updateForm" action="auth_memberUpdate.do" method="post">
<fieldset>
	<legend><h2>내 정보 수정</h2></legend>
	<br>
	<h3>필수 정보</h3><br>
	<table cellpadding='10'>
		<tr>
			<td align="right">아이디</td>
			<td><input type="text" value="${sessionScope.mvo.id}" readonly="readonly" name="id" id="id" style="width:240px;"></td>
			<td><img src="${initParame.root }img/ex_mark.png" style="width:13px;"> <font size='2'><span id="idCheckView">사용하실 아이디 안내</span></font></td>
		</tr>
		<tr>
			<td align="right">비밀번호</td>
			<td colspan='2'><input type="password" value="${sessionScope.mvo.password}" name="password" id="password" style="width:240px;"></td>
		</tr>
		<tr>
			<td align="right">비밀번호 확인</td>
			<td><input type="password" placeholder="비밀번호 확인 입력" name="passwordconfirm" id="passwordconfirm" style="width:240px;"></td>
			<td><img src="${initParame.root }img/ex_mark.png" style="width:13px;"> <font size='2'><span id="passCheckView">사용하실 비밀번호 안내</span></font></td>
		</tr>
		<tr>
			<td align="right">지역선택</td>
			<td colspan='2'><select name="location" id="location"  style="width:240px;">
					<option value="">지역 선택</option>
					<option value="서울특별시">서울특별시</option>
					<option value="경기도">경기도</option>
					<option value="충청도">충청도</option>
					<option value="경상도">경상도</option>
					<option value="전라도">전라도</option>
					<option value="강원도">강원도</option>
					<option value="제주도">제주도</option>
				</select></td>
		</tr>
		<tr>
			<td align="right">학교선택</td>
			<td><select name="univ" id="univ"  style="width:240px;"></select></td>
			<td><font size='2'><img src="${initParame.root }img/ex_mark.png" style="width:13px;"> 지역 선택 먼저</font></td>
		</tr>
	</table> 
	<br>
	<hr>
	<br>
	<h3>부가 정보</h3><br>
	<table cellpadding='10'>
		<tr>
				<td colspan='2'>
					<font size='2'><img src="${initParame.root }img/ex_mark.png" style="width:13px;"> 부가 정보의 '휴대폰 번호'는 판매자 또는 구매 희망자로부터 빠른 연락을 받기 위한 용도입니다. 로그인 사용자에게만 공개됩니다.</font>
				</td>
		</tr>
		<tr>
			<td align="right" width="130px">휴대폰 번호 공개</td>
			<td><select name="visible" id="visible">
					<option value="0">아니오</option>
					<option value="1">예</option>
				</select>
			</td>
			</tr>
		<tr>
			<td align="right">휴대폰 번호</td>
			<td><input type="text" value="${sessionScope.mvo.phone}" name="phone" id="phone" style="width:240px;"><font size='2'>
			&nbsp;&nbsp;<img src="${initParame.root }img/ex_mark.png" style="width:13px;"> 예) 010-1234-5678</font></td>
		</tr>
	</table>
	<br>
	<div style="background-color: #EAEAEA">
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="submit" value="정보 수정" style="font-family:'맑은 고딕'; width:100px; height:40px; background-color: #1F50B5; color:white;">
		<input type="button" value="수정취소" id="cancel" style="font-family:'맑은 고딕'; width:100px; height:40px; background-color: #C90000; color:white;">
	</div>
</fieldset>
</form>
